<template>
  <el-dialog
    v-model="dialogVisible"
    :close-on-click-modal="false"
    append-to-body
    @close="close"
    title="过滤器函数编辑器"
    width="1050"
  >
    <div class="flex">
      <div class="w-[700px]">
        <AceEditor
          :value="filterStr"
          @change="changeFilterMethod"
          @error="handleError"
        />
      </div>
      <div class="flex-1 ml-[10px] rounded-md">
        <div
          class="flex items-center w-[100%] h-[40px] bg-[#ffffff1a] rounded-md"
        >
          <div
            @click="rightFlag = 0"
            :class="{ 'bg-[#313030]': rightFlag == 0 }"
            class="cursor-pointer h-[30px] px-[5px] text-center leading-[30px] rounded-md mx-[4px]"
          >
            默认过滤数据
          </div>

          <div
            @click="rightFlag = 1"
            :class="{ 'bg-[#313030]': rightFlag == 1 }"
            class="cursor-pointer h-[30px] px-[5px] text-center leading-[30px] rounded-md mx-[4px]"
          >
            过滤器结果
          </div>
          <div
            @click="rightFlag = 2"
            :class="{ 'bg-[#313030]': rightFlag == 2 }"
            class="cursor-pointer w-[70px] h-[30px] text-center leading-[30px] rounded-md mx-[4px]"
          >
            代码校验
          </div>
        </div>
        <div
          v-if="rightFlag == 0"
          class="h-[470px] px-[10px] py-[10px] relative"
        >
          <el-scrollbar height="470">
            <pre
              class="w-[280px]"
              v-html="JSON.stringify(props.orginResponse, null, 2)"
            ></pre>
          </el-scrollbar>

          <!-- {{ props.resData || "暂无数据" }} -->
        </div>
        <div
          v-if="rightFlag == 1"
          class="h-[470px] px-[10px] py-[10px] relative"
        >
          <el-scrollbar height="400">
            <pre
              class="w-[280px]"
              v-html="JSON.stringify(filterResData, null, 2)"
            ></pre>
          </el-scrollbar>

          <el-button
            class="absolute bottom-[10px] right-[10px]"
            type="primary"
            size="large"
            icon="Pointer"
            color="#3a89fe"
            @click="checkRes"
            >检查结果</el-button
          >
        </div>
        <div v-if="rightFlag == 2" class="px-[10px] py-[10px]">
          <span class="text-[18px]">错误信息</span>
          <el-scrollbar height="420" v-if="currentError.length > 0">
            <div class="my-[10px]" v-for="(item, i) in currentError" :key="i">
              <div class="mb-[7px] text-[#8a8787]">
                错误详情：<span class="text-[red]"> {{ item.text }}</span>
              </div>
              <div class="text-[#8a8787]">
                错误位置：{{ item.row }}行{{ item.column }}列
              </div>
            </div>
          </el-scrollbar>
          <div v-else>暂无</div>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="confirm">保存</el-button>
        <el-button @click="close">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import AceEditor from "@renderer/components/eventConfgDialog/aceEditor.vue";
import { generateFilterFunc } from "@renderer/hooks/useEvents";
type PropsType = {
  filterMethod: any;
  resData: any;
  orginResponse: any;
};
let props = withDefaults(defineProps<PropsType>(), {
  filterMethod: () => {},
  resData: "",
  orginResponse: () => ({}),
});
let rightFlag = ref(0);
let currentError = ref([]);
let dialogVisible = ref(false);
let emit = defineEmits(["close", "updateData"]);
let filterStr = ref("");

watch(
  props,
  () => {
    filterStr.value = props.filterMethod;
  },
  {
    immediate: true,
  }
);

const filterResData = ref("暂无");
const changeFilterMethod = (val) => {
  filterStr.value = val;
};
const handleError = (error: any[]) => {
  currentError.value = error;
};
const confirm = () => {
  emit("updateData", filterStr.value);
  close();
};
const close = () => {
  dialogVisible.value = false;
  emit("close");
};
const checkRes = () => {
  if (currentError.value.length > 0) {
    ElMessage.error("请检查代码错误");
    return;
  }

  let data = JSON.parse(JSON.stringify(props.resData || {}));
  filterResData.value =
    generateFilterFunc(filterStr.value, data, props.orginResponse)() ||
    "暂无结果";
};
defineExpose({
  dialogVisible,
});
</script>

<style scoped lang="scss"></style>
